<template>
  <div class="pad-l-20 pad-r-20 pad-t-15 bg-color-white">
    <div v-loading="listLoading" :element-loading-text="loadingText">
      <el-steps :active="stepsStatus" finish-status="success" class="step-bar mar-t-10 mar-b-10" align-center>
        <el-step title="待发布"></el-step>
        <el-step title="发布中"></el-step>
        <el-step title="已停止"></el-step>
      </el-steps>
      <el-divider></el-divider>
      <!-- 导航块 -->
      <div class="top-nav">
        <template v-for="(item, index) of topNavBar">
          <div :key="index" class="nav-item" :class="{'nav-active' : topNavBaroIndex === index}"
            @click="goTarget('#' + item.target, index)">{{item.name}}</div>
        </template>
      </div>
      <div class="circle-x-tab pad-l-20 pad-r-20 mar-t-20" style="margin-bottom: 200px;">
        <!-- 计划基础信息 -->
        <plan-info id="plan-info" class="scroll-item" :planId="planId" ref="planInfoRef">
        </plan-info>
        <!-- 计划佣金设置 -->
        <plan-detail-goods-commission id="plan-detail-goods-commission" :planId="planId" class="scroll-item"
          ref="planDetailGoodsCommissionRef">
        </plan-detail-goods-commission>
        <!-- 一级合伙人设置 -->
        <plan-detail-partner id="plan-detail-partner" :planId="planId" class="scroll-item" ref="planDetailPartnerRef">
        </plan-detail-partner>
      </div>
      <div class="bottom-bar">
        <el-button @click="doBack">上一步</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  // 基础信息组件
  import planInfo from './components/plan-info'
  // 佣金设置组件
  import planDetailGoodsCommission from './components/plan-detail-goods-commission'
  // 一级合伙人设置组件
  import planDetailPartner from './components/plan-detail-partner'
  import {
    getPlanManagementById
  } from '@/api/user/enterprisePlanManagement'
  export default {
    components: {
      planInfo,
      planDetailGoodsCommission,
      planDetailPartner
    },
    directives: {

    },
    data() {
      return {
        listLoading: false,
        loadingText: '加载中...',
        // 导航栏
        topNavBar: [
          { name: '计划设置', target: 'plan-info' },
          { name: '佣金设置', target: 'plan-detail-goods-commission' },
          { name: '一级合伙人设置', target: 'plan-detail-partner' }
        ],
        // 导航位置
        topNavBaroIndex: 0,
        planId: '',
        // 进度状态
        stepsStatus: 0
      }
    },
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      this.planId = queryParams.planId
      // 不管有么有计划id，都去请求接口，有计划id就请求数据，没有就重新生成新的计划id，已被后续的操作使用
      this.getPlan()
    },
    mounted() {
      this.$nextTick(function() {
        const queryParams = this.getCurrentPage().query
        if (queryParams.active) {
          this.goTarget(`#${this.topNavBar[queryParams.active]['target']}`, queryParams.active)
        }
        for (let i = 0; i < this.topNavBar.length; i++) {
          const dom = document.getElementById(`${this.topNavBar[i]['target']}`)
          this.$set(this.topNavBar[i], 'top', dom.offsetTop)
          this.$set(this.topNavBar[i], 'h', dom.clientHeight)
        }
      })
      window.addEventListener('mousewheel', this.getDomTop)
    },
    methods: {
      // 获取计划信息
      getPlan() {
        const data = {
          planId: this.planId
        }
        if (data.planId) {
          // this.listLoading = true
          // this.loadingText = '加载中...'
        }
        getPlanManagementById(data).then(response => {
          // this.listLoading = false
          if (response.isError) return
          this.stepsStatus = response.data.status - 1
          this.$bus.$emit('plan.data', response.data)
        })
      },
      // 鼠标滚动导航定位事件
      getDomTop() {
        const that = this
        const scroll = document.documentElement.scrollTop || document.body.scrollTop
        const windowHeight = document.documentElement.clientHeight || document.body.clientHeight
        const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
        for (let i = 0; i < that.topNavBar.length; i++) {
          const dom_id = `${that.topNavBar[i]['target']}`.trim()
          var dom_top = 0
          var domIdObj = document.getElementById(dom_id)
          if (domIdObj) {
            const crObj = domIdObj.getBoundingClientRect()
            if (crObj) {
              dom_top = crObj.top
            }
          }
          if (dom_top < 250 && dom_top > 0) {
            that.topNavBaroIndex = i
          }
          if (scroll + windowHeight === scrollHeight) {
            that.topNavBaroIndex = that.topNavBar.length - 1
          }
        }
      },
      // 导航定位事件
      goTarget(id, index) {
        document.querySelector(id).scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        })
        this.topNavBaroIndex = index
      },
      doBack() {
        history.back()
      }
    }
  }
</script>
<style lang="less" scoped>
  .circle-x-tab {
    padding-bottom: 70px;

    /deep/.el-checkbox__label {
      font-size: 16px;
    }

    /deep/.el-radio__label {
      font-size: 14px;
    }

    /deep/.el-checkbox__inner {
      width: 14px;
      height: 14px;
    }

    /deep/.el-checkbox__inner {
      width: 18px;
      height: 18px;
    }

    /deep/.form-diy .el-form-item {
      background: none;
    }

    /deep/.form-diy .el-form-item.none-mar-b {
      margin-bottom: 0 !important;
    }

    /deep/.form-diy .el-color-picker--medium .el-color-picker__trigger {
      width: 100px;
    }

    /deep/.form-diy .el-color-picker__empty,
    /deep/.form-diy .el-color-picker__icon {
      left: 80%;
    }

    /deep/.form-diy .el-form-item__label {
      font-size: 14px !important;
      font-weight: normal !important;
    }

    /deep/.form-diy .el-upload--picture-card {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }

    /deep/.el-form-item {
      background: white;
    }

    /deep/.el-form-item .el-form-item {
      margin-bottom: 22px;
    }

    /deep/.one-label>.el-form-item__label {
      text-align: center;
      font-size: 16px;
      padding-top: 22px;
      color: #333;
      font-family: "微软雅黑", "Arial", "sans-serif";
    }

    /deep/.one-label>.el-form-item__content {
      padding: 20px 50px 20px 0;
      border-left: #F7F8FA 10px solid;

      .el-form-item__label {
        font-size: 14px;
      }
    }

    /deep/.el-form-item__content {
      font-size: 14px;

      .el-form-item__label {
        font-size: 18px;
        font-weight: normal;
      }
    }
  }

  .top-nav {
    position: sticky;
    top: 50px;
    // top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 999;
    box-shadow: 0 2px 6px #eee;

    .nav-item {
      cursor: pointer;
    }

    .nav-active {
      position: relative;
      color: #409eff;

      &::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: -15px;
        width: calc(100% + 30px);
        height: 2px;
        background-color: #409eff;
      }
    }
  }

  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    z-index: 999;
    box-shadow: 5px 1px 5px #cccccc;

    .el-button {
      width: 100px;
      height: 40px;
      line-height: 40px;
      padding: 0;
    }

    .el-button+.el-button {
      margin-left: 30px;
    }
  }

  .el-form-item__content {
    .el-button {
      padding: 0;
      height: 34px;
      width: 139px;
    }
  }

  .span-bar {
    padding: 0 50px;
  }

  .remove-btn {
    padding: 7px 6px !important;
  }

  .long-input {
    width: 80%;
  }

  .long-input-2 {
    width: 55%;
    margin-right: 5%;
  }

  .long-input-3 {
    width: 55%;
  }

  .short-input {
    width: 20%;
  }

  .short-input-2 {
    width: 25%;
  }

  .default-input {
    width: 50%;
  }

  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }

  .picture {
    width: 130px;
    height: 130px;
    display: block;
  }

  .pic-bar {
    position: relative;

    .close-icon {
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }

    span {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }
  }

  .pic-add {
    background: #fff;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }

  .bottom-btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
</style>
